<template>
  <CustomTableCard 
    footer
    :total="total" 
    :page.sync="queryParams.page" 
    :limit.sync="queryParams.limit" 
    @on-page="getList">
    <div slot="header">
      <v-row>
        <v-col cols="2">
          <v-select
            v-model="queryParams.type"
            :items="['已审核', '未审核', '已预订', '未预订']"
            label="选择状态"
            solo
            dense
            outlined
            flat
            hide-details
            clearable
          ></v-select>
        </v-col>
        <v-col cols="2">
          <v-select
            v-model="queryParams.dateType"
            :items="['入住日期', '散团日期', '订单日期', '创建日期']"
            solo
            dense
            outlined
            flat
            hide-details
          ></v-select>
        </v-col>
        <v-col cols="3">
          <el-date-picker
            v-model="queryParams.dateRange"
            type="daterange"
            align="center"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 100%">
          </el-date-picker>
        </v-col>
        <v-col cols="2">
          <v-text-field
            label="搜索线路"
            outlined
            dense
            hide-details
          ></v-text-field>
        </v-col>
        <v-col>
          <v-btn color="info" class="mr-3">搜索</v-btn>
        </v-col>
      </v-row>
    </div>
    <v-row>
      <v-col cols="9">
        <el-table
          v-loading="loading"
          v-auto-height
          :height="tableHeight"
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            prop="address"
            label="团号"
            width="180">
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="address"
            label="产品名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="address"
            label="接团日期"
            width="180">
          </el-table-column>
          <el-table-column
            prop="address"
            label="散团日期"
            width="180">
          </el-table-column>
          <el-table-column
            prop="address"
            label="行程天数"
            width="180">
          </el-table-column>
          <el-table-column
            prop="address"
            label="人数"
            width="180">
          </el-table-column>
          <el-table-column
            fixed="right"
            prop="address"
            label="安排状态"
            align="center"
            width="140">
            <template slot-scope="{ row }">
              <span>无需安排</span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            prop="address"
            label="导游安排"
            align="center"
            width="180">
            <template slot-scope="{ row }">
              <v-btn small color="primary" outlined>预订</v-btn>
              <v-btn small color="primary" outlined>编辑</v-btn>
            </template>
          </el-table-column>
        </el-table>
    </v-col>
    <v-col cols="3">
      <v-card>
        <v-card-title>
          <v-text-field
            dense
            single-line
            outlined
            hide-details
            placeholder="搜索导游名字"
          ></v-text-field>
        </v-card-title>
      </v-card>
    </v-col>
    </v-row>
  </CustomTableCard>
</template>

<script>
// @ is an alias to /src
import { mapMutations } from 'vuex'
import mixin from './mixin'
import { getSpOrderList } from '@/api/group'

export default {
  name: 'arrangeHotel',
  mixins: [mixin],
  created() {
    this.getList()
  },
  activated() {
    this.getList()
  },
  deactivated() {
    console.log('deactivated')
  },
  mounted() {

  },
  data() {
    return {
      loading: false,
      tableData: [{}],
      total: 0,
      queryParams: {
        page: 1,
        limit: 20,
        type: '',
        dateType: '',
        dateRange: [],
      }
    }
  },

  methods: {
    // 获取列表
    getList(page) {
      if (/\d+/.test(page)) {
        this.queryParams.page = page
      }
      this.loading = true
      getSpOrderList(this.queryParams).then(response => {
        this.tableData = response.data.data
        this.total = response.data.count
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>
